<template>
    <div class="flex flex-col w-full">
        <template v-if="userStore.isLogin">
            <!-- 选项 -->
            <el-radio-group v-model="taskIndex" @change="changeType">
                <el-radio-button
                    v-for="(item, index) in taskLists"
                    :key="index"
                    :value="item.value"
                >
                    {{ item.name }}
                </el-radio-button>
            </el-radio-group>

            <!-- 展示 -->
            <el-scrollbar class="flex-1 h-full mt-4">
                <div
                    v-if="pager.lists.length > 0 && !firstLoading"
                    class="task-lists grid gap-4 6xl:grid-cols-6 4xl:grid-cols-5 2xl:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2"
                >
                    <div
                        v-for="(item, index) in pager.lists"
                        :key="index"
                        class="task-item"
                    >
                        <!-- 生成中 -->
                        <template v-if="item.status === 1 || item.status === 0">
                            <StateProgress :value="item" />
                        </template>

                        <!-- 成功的 -->
                        <template v-if="item.status === 2">
                            <StateSuccess :value="item" />
                        </template>

                        <!-- 失败的 -->
                        <template v-if="item.status === 3">
                            <StateFail :value="item" />
                        </template>
                    </div>
                </div>

                <div
                    v-if="pager.lists.length <= 0 && !firstLoading"
                    class="h-full flex items-center justify-center"
                >
                    <el-empty class="w-[150px]" :image="ImageEmpty" />
                </div>
            </el-scrollbar>

            <div
                v-if="pager.lists.length > 0 && !firstLoading"
                class="flex justify-center pt-4"
            >
                <paging
                    v-model="pager"
                    layout="prev, pager, next"
                    @change="queryLists"
                />
            </div>
        </template>

        <div
            v-else
            class="flex items-center justify-center h-full"
        >
            <el-empty class="!py-0" description="请登录后再查看" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import ImageEmpty from '~/assets/image/draw/empty.png'
import StateFail from './state-fail.vue'
import StateSuccess from './state-success.vue'
import StateProgress from './state-progress.vue'
import { pager, queryLists, queryParams } from '../hooks/useVideoEffect'
import useUserStore from '~/stores/user'

const userStore = useUserStore()
const firstLoading = ref<boolean>(true)

const taskIndex = ref<number>(0)
const taskLists = [
    { name: '全部', value: 0 },
    { name: '生成中', value: 1 },
    { name: '生成成功', value: 2 },
    { name: '生成失败', value: 3 }
]

const changeType = async (status: any) => {
    queryParams.status = status
    await queryLists()
}

onMounted(async () => {
    await queryLists()
    firstLoading.value = false
})
</script>

<style lang="scss" scoped>
:deep(.el-scrollbar) {
    .el-scrollbar__view {
        height: 100%;
    }
}

.task-lists {
    .task-item {
        box-sizing: border-box;
        padding: 8px 15px 15px;
        margin-top: 0;
        background-color: var(--el-bg-color);
        border-radius: 8px;
        box-shadow: 0 3px 10px #ebeefd;
    }
}
</style>
